<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title> jsx 啥？  </title>
</head>
<body>
    <div id="test1"></div>
    <div id="test2">
        <h3>xxx</h3>
    </div>
</body>
</html>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel" >
    // 新修订 北京丰台御槐园 2021-10-03-夜 补充 
    const msg = "常东东"
    const say = "收购腾讯"
    // 创建虚拟dom -->渲染虚拟dom 
    // var element = React.createElement("h1",{id:"myTitle"},"hellow") 这种创建 太费劲 
    const vDom = <h3 id={test2}>{msg}</h3>                            //jsx语法 
    ReactDOM.render(vDom, document.getElementById("test2"))
   /*
    jsx是什么？ 
        *js的语法拓展 在很多地方称为jsxml 用来描述我们的界面 完全可以和我们的js融合到一块去 
        *不同于 vue中的模板语法 不需要去记住指令 v-XXXXXXX
        *jsx 是嵌入到js中的一种结构语法  遇到< 当html解析 遇到{当js解析执行  
        *jsx 的顶层只能由一个根元素Root 所以我们很多时候在外层包裹一个div 或者 Fragment 
        *方便阅读 在jsx外层包裹 一个小括号 并且可以换行书写 
        *jsx 的标签可以双标签 也可以单标签 单标签必须闭口 /> 

        JSX会被编译为React.creactElement(), React.creactElement()调用 将返回一个叫做 ReactElement的js对象 bable编译去 
        使其具备js 能力     

  */

    //jsx 注释 {/* */}    

    //jsx 嵌入表达式，在jsx中使用表达式？
    /*  
        如果我们jsx中的内容是动态的 我们可以通过表达式来获取 
        书写规范 ： {表达式}
        大括号内可以是 ？
         变量，字符串，数组，函数，调用等任意js表达式 
    */   


    //jsx 嵌入变量 
    /*
      情况一 当变量是number string array类型时 可以直接显示 
      情况二 当变量是null undefined boolean类型时 内容为空 
        注意 如果希望可以显示的话 那么需要转换为字符串  转换的方式由很多 toString() 和空字符串拼接 String变量等...
      情况三 对象类型不能作为子元素 

      ？为什么null undefined boolean在jsx中显示为空讷  
         在开发过程中 会就行很多判断 在判断结果为false时 不显示一个内容 在判断结果为true时 显示一个内容 
         看下面代码示例 
    */ 

    // 案例 
    // class App extends React.Component{
    //     constructor(props){
    //         super(props);
    //         this.state = {
    //             flag :false
    //         }
    //     }
    //     render(){
    //         return(
    //             <div>
    //                 {this.state.flag? <h2>我是h2</h2> : null}
    //                 {this.state.flag && <h2>我是h2</h2>
    //                 }    
    //             </div>
    //         )
    //     }
    // }

    //属性动态插值   
    /*  
        let text = "去百度";
        let linkUrl = "http//:baidu.com";
        let Dome = <a href={linkUrl}>按钮</a>

        let meStyle = {color："red",backgroundColor:"red"}
        let Dome = <p style={meStyle}>按钮</p>

        let Dome = <p className="demostyle">按钮</p>
     */




</script>